<template>
<div id="vip">
  <div>
    <div class="account">
      <div class="iconfont">
        <svg class="font-icon" aria-hidden="true" >
        <use xlink:href="#icon-qianbao"></use>
      </svg>
        <div style="font-size:20px;">钱包</div>
        <div style="font-size:24px;padding-right: 20px;">￥100.00</div>
        <div style="height:32px;line-height: 32px">
          <el-button size="mini" >充值</el-button>
        </div>
      </div>
    </div>
    <div class="vip_pay">
      <div class="iconfont">
        <svg class="font-icon" aria-hidden="true" >
          <use xlink:href="#icon-VIP"></use>
        </svg>
        <div style="font-size:20px;">会员</div>
        <div v-show="user.vip!=0" style="height:32px;line-height: 32px">
        <span v-show="vipTime =='1'">到期时间：{{ user.vipDueTime }}</span>
        <span v-show="vipTime =='2'">已过期</span>
        </div>
        <div v-show="user.vip==0" style="height:32px;line-height: 32px">未开通 </div>
        <div style="height:32px;line-height: 32px">
          <el-button size="mini" @click="createOrder" v-show="user.vip==0">开通</el-button>
          <el-button size="mini" @click="createOrder" v-show="user.vip!=0">续费</el-button>
        </div>
      </div>
    </div>
    <div class="auth">
      <div class="auth_text">会员特权</div>
      <div style="display: inline-block;text-align: center">
        <svg class="font-icon_resume" aria-hidden="true" >
        <use xlink:href="#icon-jianlimoban"></use>
      </svg>
        <div style="font-size:16px;">模板下载</div>
      </div>
      <div style="display: inline-block;text-align: center">
        <svg class="font-icon_auth" aria-hidden="true" >
          <use xlink:href="#icon-kecheng"></use>
        </svg>
        <div style="font-size:16px;">课程学习</div>
      </div>
      <div style="display: inline-block;text-align: center">
        <svg class="font-icon_auth" aria-hidden="true" >
          <use xlink:href="#icon-anciyouxian"></use>
        </svg>
        <div style="font-size:16px;">优先推荐</div>
      </div>
    </div>
  </div>

  <el-dialog
      title="请确认订单"
      :visible.sync="dialogVisible"
      width="50%">
    <el-descriptions class="margin-top" :column="1" border>
      <el-descriptions-item>
        <template slot="label">
         订单号
        </template>
        {{form.outTradeNo}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
         商品
        </template>
        {{ form.subject }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
         价格
        </template>
        ￥{{ form.totalAmount }}/月
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
         详情
        </template>
        {{ form.body }}
      </el-descriptions-item>
    </el-descriptions>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="pay">确 认</el-button>
  </span>
  </el-dialog>

</div>
</template>

<script>
import {alipay, createVip} from "@/network/recruit";
import randomOrder from "@/utils/randomOrder"
import {getPersonInfo} from "@/network/user";
export default {
  name: "VipServer",
  data(){
    return{
      dialogVisible:false,
      form:{
        outTradeNo:'',
        subject:'千城百行VIP会员',
        totalAmount:25,
        body:'开通千城百行会员，享免费模板，简历优先推荐，你值得拥有！',
      },
      userId:'',
      user:'',
      userName:'',
      vipTime:''
    }
  },
  mounted() {
    if(localStorage.getItem("common_userId")){
      this.userId = localStorage.getItem("common_userId");
      this.userName = localStorage.getItem("common_userName");
    }
    this.personInfo();
  },
  methods:{
    personInfo(){
      getPersonInfo(this.userName).then(res=>{
        this.user = res.data.data;
        if(new Date(this.user.vipDueTime).getTime() > new Date().getTime()){
          this.vipTime = "1";
        }else if(new Date(this.user.vipDueTime).getTime() < new Date().getTime()){
          this.vipTime = "2";
        }
      })
    },
    createOrder(){
    this.form.outTradeNo = randomOrder();
      this.dialogVisible=true;
    },
    pay(){
      createVip(this.userId).then(res=>{this.user = res.data.data});
      alipay(this.form.outTradeNo,this.form.subject,this.form.totalAmount,this.form.body).then(res=>{
       /* const divForm = document.getElementsByTagName('div')
        if (divForm.length) {
          document.body.removeChild(divForm[0])
        }*/
        const div = document.createElement('div')
        div.innerHTML = res.data // data就是接口返回的form 表单字符串
        document.body.appendChild(div)
        document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
        document.forms[0].submit()
      });
    }
  }
}
</script>

<style scoped>
#vip{
  background-color:white;
  padding:20px;
  box-shadow: 0 5px 5px 0 #eceaea;
  min-height: 464px;
}
.account{
  background-color:#F2F6FC;
  width:50%;
  float: left;
}
.vip_pay{
  background-color: #F2F6FC;
  width:50%;
  float: right;
}
.auth{
  width:100%;
  height:200px;
  float:left;
}
.font-icon {
  width: 8em;
  height: 5em;
  fill: currentColor;
  overflow: hidden;
}
.font-icon_resume{
  width: 10em;
  height: 4em;
  fill: currentColor;
  overflow: hidden;
}
.font-icon_auth{
  width: 10em;
  height: 3em;
  fill: currentColor;
  overflow: hidden;
}
.iconfont{
  width: 15em;
  height: 10em;
  margin:20px auto;
  text-align:center;
}
.auth_text{
  font-size:20px;width:20px;margin-top:40px;display: inline-block;
}

</style>